<template>
    <div style="padding-right:5px;">
        <el-form label-width="100px">
            <el-form-item label="查询关键字：">
<!--                <el-input v-model="keyword" ></el-input>-->
                <el-autocomplete
                        v-model="keyword"
                        :fetch-suggestions="querySearchAsync"
                        placeholder="请输入内容"
                ></el-autocomplete>
            </el-form-item>
            <el-form-item label-width="0" style="padding-left: 10px;" align="center">
                <el-button type="primary" @click="() => {this.keyword = ''}">清空</el-button>
                <el-button type="primary" :loading="loading" @click="query">查询</el-button>
            </el-form-item>
            <el-form-item label="结果：" v-if="showResult">
                <el-table :data="resultArr">
                    <el-table-column prop="completeYear" label="结果"></el-table-column>
                    <el-table-column prop="year" label="年-月-日">
                        <template slot-scope="scope">
                            {{(scope.row.year || '无')}}-{{(scope.row.month || '无')}}-{{(scope.row.day || '无')}}
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "era1",
        data() {
            return {
                keyword: null,
                loading: false,
                showResult: false,
                resultArr: [],
                keywordArr: ['至元二年五月初四', '至元丁丑六月庚辰', '崇禎甲申', '聖祖五十年', 'BB明萬曆十五年（1587）'],
                timeout: null,
            }
        },
        methods: {
            querySearchAsync(queryString, cb) {
                let keywordArr = this.keywordArr;
                let results = (queryString ? keywordArr.filter(kw => kw.includes(queryString)) : keywordArr).map(kw => {return {value: kw}});
                // console.log('queryString:', queryString, 'results:', results)

                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    cb(results);
                }, 1000 * Math.random());
            },
            async query() {
                if (!this.keyword) {
                    this.$message.error('请输入查询关键字')
                    return
                }
                this.loading = true
                this.showResult = false
                // let response = await axios.get( 'http://localhost:8081/era/convert?key=' + this.keyword)
                try {
                    let response = await axios.get( 'http://ddup4.com:8081/era/convert?key=' + this.keyword)
                    // console.log('response:', response)
                    this.resultArr = response.data
                } catch (e) {
                    this.$message.error('查询出错，请联系管理员')
                    this.resultArr = []
                }
                this.loading = false
                this.showResult = true
            }
        }
    }
</script>

<style scoped>

</style>
